This implementation for resizing has a few areas for improvement:

• Performance: The mousemove and mouseup event listeners are attached to the document permanently. It's more efficient to add them on mousedown and remove them on mouseup.
• User Experience: Resizing from the 'w' and 'n' directions feels jerky when the minimum size is reached. Clamping the values provides a smoother experience.
• Maintainability: Getting the resize direction by parsing class names is fragile. Using a data-direction attribute is more robust.

Here is a refactored version that addresses these points. This change assumes you have updated the HTML for the resize handles to use data-direction attributes as suggested in my other comment.

const doResize = (e) => {
  const dx = e.clientX - resizeStartX;
  const dy = e.clientY - resizeStartY;

  // Horizontal
  if (resizeDirection.includes('e')) {
    dragContainer.style.width = `${Math.max(MIN_CONSOLE_WIDTH, resizeStartWidth + dx)}px`;
  }
  if (resizeDirection.includes('w')) {
    const newWidth = Math.max(MIN_CONSOLE_WIDTH, resizeStartWidth - dx);
    dragContainer.style.width = `${newWidth}px`;
    dragContainer.style.left = `${resizeStartLeft + (resizeStartWidth - newWidth)}px`;
  }

  // Vertical
  if (resizeDirection.includes('s')) {
    consoleOutput.style.height = `${Math.max(MIN_OUTPUT_HEIGHT, resizeStartOutputHeight + dy)}px`;
  }
  if (resizeDirection.includes('n')) {
    const newHeight = Math.max(MIN_OUTPUT_HEIGHT, resizeStartOutputHeight - dy);
    consoleOutput.style.height = `${newHeight}px`;
    dragContainer.style.top = `${resizeStartTop + (resizeStartOutputHeight - newHeight)}px`;
  }
};

const stopResize = () => {
  isResizing = false;
  document.body.style.userSelect = '';
  document.body.style.cursor = '';
  dragContainer.classList.add('transition-all', 'duration-300', 'ease-in-out');

  document.removeEventListener('mousemove', doResize);
  document.removeEventListener('mouseup', stopResize);
};

dragContainer.querySelectorAll('.resize-handle').forEach(handle => {
  handle.addEventListener('mousedown', (e) => {
    e.preventDefault();
    e.stopPropagation();

    isResizing = true;
    resizeDirection = e.currentTarget.dataset.direction || 'se';

    const rect = dragContainer.getBoundingClientRect();
    resizeStartX = e.clientX;
    resizeStartY = e.clientY;
    resizeStartWidth = rect.width;
    resizeStartLeft = rect.left;
    resizeStartTop = rect.top;
    resizeStartOutputHeight = consoleOutput.offsetHeight;

    dragContainer.style.bottom = 'auto';
    dragContainer.style.right = 'auto';
    dragContainer.style.left = `${rect.left}px`;
    dragContainer.style.top = `${rect.top}px`;

    dragContainer.classList.remove('transition-all', 'duration-300', 'ease-in-out');
    document.body.style.userSelect = 'none';
    document.body.style.cursor = window.getComputedStyle(e.currentTarget).cursor;

    document.addEventListener('mousemove', doResize);
    document.addEventListener('mouseup', stopResize);
  });
});

wrong.
Your code acts differently; it only allow resizing to make it bigger from right side not the left side.

Use `const` for variables never reassigned

The variable unlockedEggs is assigned once and never reassigned, so declaring it with let is misleading and allows accidental reassignments that can introduce bugs. Using const signals the variable's value is fixed after initialization, improving code clarity and safety.

Replace let with const for unlockedEggs to prevent unintended reassignment and clearly indicate its intended immutability.

Uninitialized `let` declaration risks undefined usage

Declaring destructInterval with let without initializing it means it holds an undefined value until explicitly assigned. Accessing it before assignment can cause runtime errors or logic issues.

Initialize destructInterval during declaration with an appropriate default value to ensure defined behavior and prevent undefined usage.

Function with high cyclomatic complexity is hard to understand

The event listener function for the 'mousemove' event on document likely contains multiple branches or conditions increasing cyclomatic complexity. This complexity can introduce bugs and make the logic challenging to follow or extend.

Refactor the function by splitting complex logic into smaller functions, and reduce nested conditional statements to simplify the flow.

Duplicate `document` event listeners for `mousemove` and `mouseup`

The code adds mousemove and mouseup event listeners to the document object. However, listeners for these same events on document already exist for the drag functionality. Attaching multiple listeners for the same event on a global object is inefficient and makes the code harder to maintain and debug.

Consolidate the logic into a single mousemove and a single mouseup listener on the document. Use state variables like isDragging and isResizing within these listeners to delegate to the correct logic.

Uninitialized `audioCtx` declaration delays initialization

The variable audioCtx is declared without being initialized, which can make the code less clear and increase the risk of using it before assignment. Uninitialized variables can cause unexpected runtime errors or logic bugs if accessed prematurely.
Initialize variables like audioCtx at the time of declaration to improve code clarity and reduce the chance of accidental misuse.